let box = document.querySelector(".box");
let imgBoxUl = box.querySelector(".img_box > ul");
let dot_box = document.querySelector(".dot_box");
let timer;
var imgArr = [];

if (!sessionStorage.getItem('img')) {
  console.log("!!!");
  ajax(
    "POST",
    "http://studentback.dfbuff.xyz/postMethod",
    function (res) {
      imgArr = res.result
      sessionStorage.setItem("img", JSON.stringify(res.result))
    }, {
      type: "图片",
    }
  );
} else {
  imgArr = JSON.parse(sessionStorage.getItem("img"))
}
setTimeout(function () {
  imgArr.forEach(function (item, index) {
 
    imgBoxUl.innerHTML += `<li><a href=""><img src=${item.content} alt=""></a></li>`;

   
    dot_box.innerHTML += `
  <span class="dot ${index == 0 ? "dotActive" : ""}" data-index="${++index}"></span>
  `;
  });
  // console.log(imgArr);

  // imgArr=JSON.parse(sessionStorage.getItem('img'))


  // 动态生成图片(第一张和最后一张)
  // console.log(imgBoxUl.firstElementChild.cloneNode(true));
  // console.log(imgBoxUl.lastElementChild.cloneNode(true));
  // 插入克隆的第一张图片到最后一张图片之后的位置
  imgBoxUl.appendChild(imgBoxUl.firstElementChild.cloneNode(true));
  // 插入克隆的第四张图片到第一张之前的位置
  imgBoxUl.insertBefore(
    imgBoxUl.children[imgBoxUl.children.length - 2].cloneNode(true),
    imgBoxUl.firstElementChild
  );
  // 初始化下标
  let index = 1;
  // 获取上一个操作的index
  let lastIndex = 1;
  // 移动到原来第一张图片的位置
  imgBoxUl.style.transform = `translateX(-${index}00%)`;
  setTimeout(function () {
    imgBoxUl.style.transition = "0.2s ease-in-out";
  }, 300);
  let flag = true; // 设置开关, 默认可以打开

  // 事件代理
  box.addEventListener("click", function (event) {
    // 左箭头
    event.target.className == "arrow_left" && arrowLeftFn(event.target);
    // 右箭头
    event.target.className == "arrow_right" &&
      arrowRightFn(event.target);
    // 小圆点
    event.target.classList.contains("dot") && dotFn(event.target);
  });

  // 点击右箭头事件
  function arrowRightFn(target) {
    if (flag) {
      flagFn();
      imgBoxUl.style.transform = `translateX(-${++index}00%)`;
      // 判断是否到达最后一张
      limit(imgBoxUl.children.length - 1, 1);
      // 获取具体span标签
      let rBtnEvent =
        target.parentElement.nextElementSibling.children[index - 1];
      dotColor(rBtnEvent);
    }
  }

  // 点击左箭头事件
  function arrowLeftFn(target) {
    if (flag) {
      flagFn();
      imgBoxUl.style.transform = `translateX(-${--index}00%)`;
      // 判断是否是第一张
      limit(0, imgBoxUl.children.length - 2);
      // 获取具体span标签
      let lBtnEvent =
        target.parentElement.nextElementSibling.children[index - 1];
      dotColor(lBtnEvent);
    }
  }

  // 临界点跳转图片
  function limit(limitIndex, setIndex) {
    // limitIndex 设置限制下标
    // setIndex   设置对于下标
    if (index == limitIndex) {
      index = setIndex;
      imgBoxUl.addEventListener("transitionend", function () {
        // 清除过渡效果, 并且ul恢复位置
        imgBoxUl.style.transition = "none";
        imgBoxUl.style.transform = `translateX(-${index}00%)`;

        // 恢复过渡效果
        // 获取最终样式(被计算的样式)
        window
          .getComputedStyle(imgBoxUl, "style")
          .getPropertyValue("transition-duration");
        imgBoxUl.style.transition = "0.2s ease-in-out";
      });
    }
  }

  // 小圆点点击事件
  function dotFn(target) {
    // 获取自定义属性的值，这个值可以和index对应
    let dataIndex = target.getAttribute("data-index");
    // 操作的值重新赋值到index，那么index就可以更新
    index = dataIndex;
    imgBoxUl.style.transform = `translateX(-${index}00%)`;
    // 调用小圆点颜色函数
    dotColor(target);
  }

  // 封装小圆点颜色变化函数
  function dotColor(tag) {
    // console.log(tag);
    tag.parentElement.children[lastIndex - 1].classList.remove(
      "dotActive"
    );
    tag.classList.add("dotActive");
    // 重新赋值给lastIndex，目的是为了拿到上一次的操作值index
    lastIndex = index;
  }

  // 控制开关
  function flagFn() {
    // 关闭开关
    flag = false;
    imgBoxUl.addEventListener("transitionend", function () {
      flag = true;
    });
  }

  // 自动轮播
  timeFn();

  function timeFn() {
    if (timer) {
      clearInterval(timer);
    }
    timer = setInterval(function () {
      arrowRightFn(box.firstElementChild.lastElementChild);
    }, 1000);
  }

  // 鼠标移入box区域，停止定时器
  box.addEventListener("mouseenter", function () {
    clearInterval(timer);
  });
  // 鼠标移出box区域，开始定时器
  box.addEventListener("mouseleave", function () {
    setTimeout(timeFn, 1000);
  });

  // 检测页面是否切换，切换就停止定时器
  window.addEventListener("visibilitychange", function () {
    if (document.hidden) {
      clearInterval(timer);
    } else {
      timeFn();
    }
  });
}, 200)